<template>
  <view
    class="acme-button"
    :class="{ selected: selected }"
    :style="{
      width,
      height,
      borderRadius,
      lineHeight: height,
      background: b,
      display: block ? 'block' : 'inline-block',
    }"
    @click="click"
    @touchstart="touchstart"
    @touchend="touchend"
    @touchcancel="touchend"
  >
    <span :style="[textStyle, {fontWeight: bold ? 'bold' : '400'}]"><slot></slot></span>
  </view>
</template>

<script>
export default {
  props: {
    // 宽度
    w: {
      type: [String, Number],
      default: "160rpx",
    },
    // 高度
    h: {
      type: [String, Number],
      default: "80rpx",
    },
    // 圆角
    r: {
      type: [String, Number],
      default: "12rpx",
    },
    // 背景颜色
    b: {
      type: String,
      default: "#07c160",
    },
    // 文字样式
    textStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 块级元素
    block: {
      type: Boolean,
      default: false,
    },
    // 加粗
    bold: {
      type: Boolean,
      default: false,
    },
    // 跳转到应用内的某个页面
    navigateTo: {
      type: String,
      default: ''
    },
    // 关闭当前页面，跳转到应用内的某个页面
    redirectTo: {
      type: String,
      default: ''
    },
    // 关闭所有页面，打开到应用内的某个页面
    reLaunch: {
      type: String,
      default: ''
    },
    // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
    switchTab: {
      type: String,
      default: ''
    },
    // 是否禁用
    disabled: Boolean
  },
  computed: {
    width() {
      let { w } = this
      return typeof w === 'number' ? `${w}rpx` : w
    },
    height() {
      let { h } = this
      return typeof h === 'number' ? `${h}rpx` : h
    },
    borderRadius() {
      let { r } = this
      return typeof r === 'number' ? `${r}rpx` : r
    }
  },
  data() {
    return {
      selected: false,
    };
  },
  methods: {
    // 开始点击
    touchstart() {
      if(this.disabled) {
        return
      }
      this.selected = true;
      this.$emit("touchstart");
    },
    // 点击
    click() {
      if(this.disabled) {
        return
      }
      if(this.navigateTo) {
        uni.navigateTo({ url: this.navigateTo })
      }
      if(this.redirectTo) {
        uni.redirectTo({ url: this.redirectTo })
      }
      if(this.reLaunch) {
        uni.reLaunch({ url: this.reLaunch })
      }
      if(this.switchTab) {
        uni.switchTab({ url: this.switchTab })
      }
      this.$emit("click")
    },
    // 点击结束
    touchend() {
      this.selected = false;
      this.$emit("touchend");
    },
  },
};
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>